<template>
    <el-dialog
        :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn') "
        v-model="visible"
        width="950"
        :close-on-click-modal="false"
        draggable
    >
      <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px"   v-loading="loading">
        <el-row :gutter="20">
  
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('wms.materialCode')" prop="materialCode">
                <MaterialSelect @handleRowClick="rowClick" :placeholder="$t('wms.pleaseEnter') + $t('wms.materialCode')" v-model="dataForm.materialCode"/>
            </el-form-item>
          </el-col>
  
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('iot.materialName')" prop="materialName">
              <el-input clearable :placeholder="$t('wms.pleaseEnter') + t('iot.materialName')" disabled v-model="dataForm.materialName"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('wms.materialSpce')" prop="specification">
              <el-input clearable :placeholder="$t('wms.pleaseEnter') + t('wms.materialSpce')" disabled v-model="dataForm.specification"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('iot.locationCode')" prop="locationCode">
              <el-input clearable :placeholder="$t('wms.pleaseEnter') + t('iot.locationCode')" disabled v-model="dataForm.locationCode"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('wms.maxCapacity')" prop="maxCapacity">
              <el-input clearable :placeholder="$t('wms.pleaseEnter') + t('wms.maxCapacity')" v-model="dataForm.maxCapacity"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
            <el-form-item :label="$t('wms.barcodeStandardQty')" prop="barcodeStandardQty">
              <el-input clearable :placeholder="$t('wms.pleaseEnter') + t('wms.barcodeStandardQty')" v-model="dataForm.barcodeStandardQty"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('wms.combinationType')" prop="combinationType">
            <el-select v-model="dataForm.combinationType">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>

        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" icon="Close">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit"
                     :disabled="loading" icon="Check">{{ $t('common.confirmButtonText') }} </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  
  import {useMessage} from "/@/hooks/message";
  import {useI18n} from "vue-i18n";
  import MaterialSelect from "/@/components/mes/select/MaterialSelect.vue";
  import {insertMaterialCapacity, updateMaterialCapacity} from "/@/api/platform/wms/warehouse";


  const {t} = useI18n();
  //下拉框
  const options = ref([
      { label: t('wms.combin'), value: 'Combin' },
      { label: t('wms.single'), value: 'Single' }
  ]);
  // 定义变量内容
  const dataFormRef = ref();
  const visible = ref(false);
  const loading = ref(false);
  
  // 定义form数据
  const dataForm = reactive({
    materialCode:'',
    materialName:'',
    specification:'',
    locationCode:'',
    maxCapacity:'',
    barcodeStandardQty:'',
    combinationType:'',
    id:''
  });

 const rowClick =(row:any) => {
    dataForm.materialName = row.materialName
    dataForm.specification = row.specification
 }

  // 定义表单校验规则
  const dataRules = reactive({
    materialCode: [
      {required: true, message: t('wms.pleaseEnter') + t('wms.materialCode'), trigger: 'blur'},
    ],
    maxCapacity: [
      {required: true, message: t('wms.pleaseEnter') + t('wms.maxCapacity'), trigger: 'blur'},
       // 限制数字
      { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' },
    ],
    barcodeStandardQty: [
      {required: true, message: t('wms.pleaseEnter') + t('wms.barcodeStandardQty'), trigger: 'blur'},
      { pattern: /^[0-9]+$/, message: '只能输入数字', trigger: 'blur' },
    ],
    combinationType: [
      {required: true, message: t('wms.select') + t('wms.combinationType'), trigger: 'blur'},
    ],
  })
  
  // 通知父组件刷新
  const emit = defineEmits(['refresh']);
  
  // 提交表单
const onSubmit = async () => {
    loading.value = true;
    dataFormRef.value.validate(async (valid: boolean) => {
        if (!valid) {
            loading.value = false;
            return false;
        }

        if (dataForm.id) {
            // id存在 则更新数据
            updateMaterialCapacity(dataForm).then((res: any) => {
                if (res.code !== 0) {
                    useMessage().error(res.msg);
                    return
                }
                loading.value = false;
                visible.value = false;
                emit('refresh');
                // 成功提示
                useMessage().success(t('basEquipment.editSuccess'));
            }).catch(error => {
                loading.value = false;
                useMessage().error(error.msg);
            })
        } else {
            insertMaterialCapacity(dataForm).then((res: any) => {
                if (res.code !== 0) {
                    useMessage().error(res.msg);
                    return
                }
                loading.value = false;
                visible.value = false;
                emit('refresh');
                // 成功提示
                useMessage().success(t('basEquipment.addSuccess'));
            }).catch(error => {
                loading.value = false;
                useMessage().error(error.msg);
            })
        }

    })
};
  
  // 打开弹框
  const openAddDialog = async(row:any) => {
    visible.value = true;
    dataForm.id = 0
    dataForm.materialCode = ''
    dataForm.materialName = ''
    dataForm.specification = ''
    dataForm.maxCapacity = ''
    dataForm.barcodeStandardQty = ''
    dataForm.combinationType = ''
    dataForm.locationCode = ''
  
    // 重置表单数据
    await nextTick(() => {
      dataFormRef.value?.resetFields();
    });
    dataForm.locationCode = row

  };
  
  // 编辑弹框
  const openEditDialog = (data: any) => {
    visible.value = true;
    // 将data中的数据解构到dataForm中
    Object.assign(dataForm, data);
  }
  
  // 暴露变量
  defineExpose({
    openAddDialog, openEditDialog
  });
  
  </script>
  
  <style scoped lang="scss">
  
  </style>